<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="box1">box1--id div</div>
    <!-- <div id="box1" class="box2">box1--id div2</div> -->
    <div id="box1">box1--id div2</div>
    <div class="box2">box2 -- class div</div>
    <div>普通的div</div>
    <button id="b1">按钮</button>
    <button id="b2">按钮2</button>
    <script>

        console.log(Math.max(10, 4, 5))
        console.log(Math.random())
        // 获取html(标签)节点方式1，通过id。首选，所以一个页面建议id唯一
        var box1 = document.getElementById('box1');
        console.log("box1---> ", box1)
        box1.innerHTML = " js 通过id获取了DOM节点并修改了文本"
        // 获取html(标签)节点方式2，通过class 返回是数组，所以建议使用方式1
        var box2 = document.getElementsByClassName('box2');
        console.log(box2)
        box2[0].innerHTML = "js通过class获取了DOM节点并修改了第二个的文本"

        // 获取html(标签)节点方式3，通过标签 返回是数组，所以建议使用方式1
        let divs = document.getElementsByTagName('div');
        console.info(divs)
        divs[3].style.color = 'red'

        // DOM 事件
        var b1 = document.getElementById('b1');
        console.info(b1)
        // ① 匿名方法，仅此处调用(没有复用，按场景使用)
        b1.onclick = function () {
            alert("通过DOM获取按钮并绑定点击事件")
        }
        document.addEventListener("click", function () {
            // 其他button标签和能点的标签都会响应该事件，如当前页面的其他div。连body都响应
            alert('DOM通过监听点击事件并设置了事件')
        })
    </script>
</body>

</html>